<!--
 * @Author: liuyonghu
 * @Date: 2021-05-14 16:46:55
 * @LastEditTime: 2021-05-25 16:40:20
 * @LastEditors: liuyonghu
 * @Description: 
 * @FilePath: \vue2amaptest\src\App.vue
-->
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <div>
      <el-button type="primary" size="default" @click="home">home</el-button>

      <el-button type="primary" size="default" @click="HelloWorld"
        >HelloWorld</el-button
      >
    </div>

    <transition>
      <keep-alive>
        <router-view :key="key"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  created() {
    console.log(" this.$route -- ", this.$route);
  },
  computed: {
    key() {
      return this.$route.path;
    },
  },
  methods: {
    HelloWorld() {
      this.$router.push({
        path: "helloword",
      });
    },
    home() {
      this.$router.push("/");
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  min-height: 100vh;
}
</style>
